ஜாவாஸ்கிரிப்ட் இறக்குமதி கட்டம்: மாட்யூல் ஏற்றுதல் கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்

நவீன வலை மேம்பாட்டிற்கு ஜாவாஸ்கிரிப்டின் மாட்யூல் அமைப்பு அடிப்படையானது. திறமையான மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை உருவாக்க, மாட்யூல்கள் எவ்வாறு ஏற்றப்படுகின்றன, பகுப்பாய்வு செய்யப்படுகின்றன மற்றும் செயல்படுத்தப்படுகின்றன என்பதைப் புரிந்துகொள்வது முக்கியம். இந்த விரிவான வழிகாட்டி ஜாவாஸ்கிரிப்ட் இறக்குமதி கட்டத்தை ஆராய்கிறது, மாட்யூல் ஏற்றுதல் உத்திகள், சிறந்த நடைமுறைகள், மற்றும் செயல்திறனை மேம்படுத்துவதற்கும் சார்புகளை நிர்வகிப்பதற்கும் மேம்பட்ட நுட்பங்களை உள்ளடக்கியது.

ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் மாட்யூல்கள், செயல்பாடுகளை உள்ளடக்கிய மற்றும் அந்த செயல்பாட்டின் குறிப்பிட்ட பகுதிகளை மற்ற மாட்யூல்களில் பயன்படுத்த வெளிப்படுத்தும் சுய-கட்டுப்பாடான குறியீடு அலகுகள் ஆகும். இது குறியீடு மறுபயன்பாடு, மாட்யூலாரிட்டி மற்றும் பராமரிப்பை ஊக்குவிக்கிறது. மாட்யூல்களுக்கு முன்பு, ஜாவாஸ்கிரிப்ட் குறியீடு பெரும்பாலும் பெரிய, ஒற்றைக் கோப்புகளில் எழுதப்பட்டது, இது நேம்ஸ்பேஸ் மாசுபாடு, குறியீடு நகலெடுப்பு மற்றும் சார்புகளை நிர்வகிப்பதில் சிரமத்திற்கு வழிவகுத்தது. குறியீட்டை ஒழுங்கமைப்பதற்கும் பகிர்வதற்கும் ஒரு தெளிவான மற்றும் கட்டமைக்கப்பட்ட வழியை வழங்குவதன் மூலம் மாட்யூல்கள் இந்த சிக்கல்களைத் தீர்க்கின்றன.

ஜாவாஸ்கிரிப்ட்டின் வரலாற்றில் பல மாட்யூல் அமைப்புகள் உள்ளன:

• CommonJS: முக்கியமாக Node.js இல் பயன்படுத்தப்படுகிறது, CommonJS require() மற்றும் module.exports தொடரியலைப் பயன்படுத்துகிறது.
• அசிங்க்ரோனஸ் மாட்யூல் வரையறை (AMD): பிரவுசர்களில் ஒத்திசைவற்ற ஏற்றுதலுக்காக வடிவமைக்கப்பட்டது, AMD மாட்யூல்கள் மற்றும் அவற்றின் சார்புகளை வரையறுக்க define() போன்ற செயல்பாடுகளைப் பயன்படுத்துகிறது.
• ECMAScript மாட்யூல்கள் (ES Modules): ECMAScript 2015 (ES6) இல் அறிமுகப்படுத்தப்பட்ட தரப்படுத்தப்பட்ட மாட்யூல் அமைப்பு, import மற்றும் export தொடரியலைப் பயன்படுத்துகிறது. இது நவீன தரநிலையாகும் மற்றும் பெரும்பாலான பிரவுசர்கள் மற்றும் Node.js ஆல் இயல்பாகவே ஆதரிக்கப்படுகிறது.

இறக்குமதி கட்டம்: ஒரு ஆழமான பார்வை

இறக்குமதி கட்டம் என்பது ஒரு ஜாவாஸ்கிரிப்ட் சூழல் (பிரவுசர் அல்லது Node.js போன்றவை) மாட்யூல்களைக் கண்டறிந்து, மீட்டெடுத்து, பகுப்பாய்வு செய்து, செயல்படுத்தும் செயல்முறையாகும். இந்த செயல்முறை பல முக்கிய படிகளை உள்ளடக்கியது:

1. மாட்யூல் தீர்வு

மாட்யூல் தீர்வு என்பது ஒரு மாட்யூலின் விவரக்குறிப்பின் (import கூற்றில் பயன்படுத்தப்படும் சரம்) அடிப்படையில் அதன் இயற்பியல் இருப்பிடத்தைக் கண்டறியும் செயல்முறையாகும். இது சூழல் மற்றும் பயன்படுத்தப்படும் மாட்யூல் அமைப்பைப் பொறுத்து ஒரு சிக்கலான செயல்முறையாகும். அதன் ஒரு முறிவு இங்கே:

• வெற்று மாட்யூல் விவரக்குறிப்புகள் (Bare Module Specifiers): இவை பாதை இல்லாத மாட்யூல் பெயர்கள் (எ.கா., import React from 'react'). சூழல் இந்த மாட்யூல்களைத் தேட ஒரு முன்வரையறுக்கப்பட்ட அல்காரிதத்தைப் பயன்படுத்துகிறது, பொதுவாக node_modules கோப்பகங்களில் தேடுகிறது அல்லது பில்ட் கருவிகளில் கட்டமைக்கப்பட்ட மாட்யூல் மேப்களைப் பயன்படுத்துகிறது.
• சார்பு மாட்யூல் விவரக்குறிப்புகள் (Relative Module Specifiers): இவை தற்போதைய மாட்யூலைப் பொறுத்து ஒரு பாதையைக் குறிப்பிடுகின்றன (எ.கா., import utils from './utils.js'). சூழல் தற்போதைய மாட்யூலின் இருப்பிடத்தின் அடிப்படையில் இந்தப் பாதைகளைத் தீர்க்கிறது.
• முழுமையான மாட்யூல் விவரக்குறிப்புகள் (Absolute Module Specifiers): இவை ஒரு மாட்யூலுக்கான முழுமையான பாதையைக் குறிப்பிடுகின்றன (எ.கா., import config from '/path/to/config.js'). இவை குறைவாகப் பயன்படுத்தப்பட்டாலும், சில சூழ்நிலைகளில் பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு (Node.js): Node.js இல், மாட்யூல் தீர்வு அல்காரிதம் பின்வரும் வரிசையில் மாட்யூல்களைத் தேடுகிறது:

1. கோர் மாட்யூல்கள் (எ.கா., fs, http).
2. தற்போதைய கோப்பகத்தின் node_modules கோப்பகத்தில் உள்ள மாட்யூல்கள்.
3. பெற்றோர் கோப்பகங்களின் node_modules கோப்பகங்களில் உள்ள மாட்யூல்கள், மீண்டும் மீண்டும்.
4. குளோபல் node_modules கோப்பகங்களில் உள்ள மாட்யூல்கள் (கட்டமைக்கப்பட்டிருந்தால்).

எடுத்துக்காட்டு (பிரவுசர்கள்): பிரவுசர்களில், மாட்யூல் தீர்வு பொதுவாக ஒரு மாட்யூல் பண்ட்லர் (வெப்பேக், பார்சல், அல்லது ரோல்அப் போன்றவை) மூலம் கையாளப்படுகிறது அல்லது இம்போர்ட் மேப்களைப் பயன்படுத்துவதன் மூலம் கையாளப்படுகிறது. இம்போர்ட் மேப்கள், மாட்யூல் விவரக்குறிப்புகளுக்கும் அவற்றின் தொடர்புடைய URL-களுக்கும் இடையில் மேப்பிங்குகளை வரையறுக்க உங்களை அனுமதிக்கின்றன.

2. மாட்யூல் பெறுதல்

மாட்யூலின் இருப்பிடம் தீர்க்கப்பட்டவுடன், சூழல் மாட்யூலின் குறியீட்டைப் பெறுகிறது. பிரவுசர்களில், இது பொதுவாக சேவையகத்திற்கு ஒரு HTTP கோரிக்கையை வைப்பதை உள்ளடக்குகிறது. Node.js இல், இது வட்டில் இருந்து மாட்யூலின் கோப்பைப் படிப்பதை உள்ளடக்குகிறது.

எடுத்துக்காட்டு (ES மாட்யூல்களுடன் பிரவுசர்):

<script type="module">
  import { myFunction } from './my-module.js';
  myFunction();
</script>

பிரவுசர் சேவையகத்திலிருந்து my-module.js ஐப் பெறும்.

3. மாட்யூல் பகுப்பாய்வு

மாட்யூலின் குறியீட்டைப் பெற்ற பிறகு, சூழல் குறியீட்டைப் பகுப்பாய்வு செய்து ஒரு சுருக்க தொடரியல் மரத்தை (AST) உருவாக்குகிறது. இந்த AST குறியீட்டின் கட்டமைப்பைப் பிரதிபலிக்கிறது மற்றும் மேலதிக செயலாக்கத்திற்குப் பயன்படுத்தப்படுகிறது. பகுப்பாய்வு செயல்முறை குறியீடு தொடரியல் ரீதியாக சரியானது மற்றும் ஜாவாஸ்கிரிப்ட் மொழி விவரக்குறிப்புடன் இணங்குகிறது என்பதை உறுதி செய்கிறது.

4. மாட்யூல் இணைத்தல்

மாட்யூல் இணைத்தல் என்பது இறக்குமதி செய்யப்பட்ட மற்றும் ஏற்றுமதி செய்யப்பட்ட மதிப்புகளை மாட்யூல்களுக்கு இடையில் இணைக்கும் செயல்முறையாகும். இது மாட்யூலின் ஏற்றுமதிகளுக்கும் இறக்குமதி செய்யும் மாட்யூலின் இறக்குமதிகளுக்கும் இடையில் பிணைப்புகளை உருவாக்குவதை உள்ளடக்குகிறது. மாட்யூல் செயல்படுத்தப்படும்போது சரியான மதிப்புகள் கிடைக்கின்றன என்பதை இணைத்தல் செயல்முறை உறுதி செய்கிறது.

எடுத்துக்காட்டு:

// my-module.js
export const myVariable = 42;

// main.js
import { myVariable } from './my-module.js';
console.log(myVariable); // Output: 42

இணைக்கும் போது, சூழல் my-module.js இல் உள்ள myVariable ஏற்றுமதியை main.js இல் உள்ள myVariable இறக்குமதியுடன் இணைக்கிறது.

5. மாட்யூல் செயல்படுத்தல்

இறுதியாக, மாட்யூல் செயல்படுத்தப்படுகிறது. இது மாட்யூலின் குறியீட்டை இயக்குவதையும் அதன் நிலையைத் தொடங்குவதையும் உள்ளடக்குகிறது. மாட்யூல்களின் செயல்படுத்தும் வரிசை அவற்றின் சார்புகளால் தீர்மானிக்கப்படுகிறது. மாட்யூல்கள் ஒரு டோபாலஜிக்கல் வரிசையில் செயல்படுத்தப்படுகின்றன, இது சார்புகளைச் சார்ந்திருக்கும் மாட்யூல்களுக்கு முன்பு சார்புகள் செயல்படுத்தப்படுவதை உறுதி செய்கிறது.

இறக்குமதி கட்டத்தைக் கட்டுப்படுத்துதல்: உத்திகள் மற்றும் நுட்பங்கள்

இறக்குமதி கட்டம் பெரும்பாலும் தானியங்குபடுத்தப்பட்டாலும், மாட்யூல் ஏற்றுதல் செயல்முறையைக் கட்டுப்படுத்தவும் மேம்படுத்தவும் நீங்கள் பயன்படுத்தக்கூடிய பல உத்திகள் மற்றும் நுட்பங்கள் உள்ளன.

1. டைனமிக் இறக்குமதிகள்

டைனமிக் இறக்குமதிகள் (import() செயல்பாட்டைப் பயன்படுத்தி) மாட்யூல்களை ஒத்திசைவற்ற மற்றும் நிபந்தனைக்குட்பட்ட முறையில் ஏற்ற உங்களை அனுமதிக்கின்றன. இது பின்வருவனவற்றிற்கு பயனுள்ளதாக இருக்கும்:

• கோட் ஸ்ப்ளிட்டிங் (Code splitting): பயன்பாட்டின் ஒரு குறிப்பிட்ட பகுதிக்குத் தேவையான குறியீட்டை மட்டும் ஏற்றுதல்.
• நிபந்தனைக்குட்பட்ட ஏற்றுதல்: பயனர் தொடர்பு அல்லது பிற இயக்க நேர நிபந்தனைகளின் அடிப்படையில் மாட்யூல்களை ஏற்றுதல்.
• சோம்பேறி ஏற்றுதல் (Lazy loading): மாட்யூல்கள் உண்மையில் தேவைப்படும் வரை அவற்றின் ஏற்றுதலைத் தள்ளிப் போடுதல்.

எடுத்துக்காட்டு:

async function loadModule() {
  try {
    const module = await import('./my-module.js');
    module.myFunction();
  } catch (error) {
    console.error('Failed to load module:', error);
  }
}

loadModule();

டைனமிக் இறக்குமதிகள் மாட்யூலின் ஏற்றுமதிகளுடன் தீர்க்கும் ஒரு வாக்குறுதியை (promise) வழங்குகின்றன. இது ஏற்றுதல் செயல்முறையை ஒத்திசைவற்ற முறையில் கையாளவும், பிழைகளை நேர்த்தியாகக் கையாளவும் உங்களை அனுமதிக்கிறது.

2. மாட்யூல் பண்ட்லர்கள்

மாட்யூல் பண்ட்லர்கள் (வெப்பேக், பார்சல், மற்றும் ரோல்அப் போன்றவை) பல ஜாவாஸ்கிரிப்ட் மாட்யூல்களை ஒரே கோப்பில் (அல்லது சிறிய எண்ணிக்கையிலான கோப்புகளில்) வரிசைப்படுத்தலுக்காக இணைக்கும் கருவிகளாகும். இது HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைப்பதன் மூலமும், பிரவுசருக்காக குறியீட்டை மேம்படுத்துவதன் மூலமும் செயல்திறனை கணிசமாக மேம்படுத்தும்.

மாட்யூல் பண்ட்லர்களின் நன்மைகள்:

• சார்புநிலை மேலாண்மை: பண்ட்லர்கள் உங்கள் மாட்யூல்களின் அனைத்து சார்புகளையும் தானாகவே தீர்த்து உள்ளடக்கிக் கொள்கின்றன.
• குறியீடு மேம்படுத்தல்: பண்ட்லர்கள் மினிஃபிகேஷன், ட்ரீ ஷேக்கிங் (பயன்படுத்தப்படாத குறியீட்டை அகற்றுதல்), மற்றும் கோட் ஸ்ப்ளிட்டிங் போன்ற பல்வேறு மேம்படுத்தல்களைச் செய்ய முடியும்.
• சொத்து மேலாண்மை (Asset management): பண்ட்லர்கள் CSS, படங்கள், மற்றும் எழுத்துருக்கள் போன்ற பிற வகை சொத்துக்களையும் கையாள முடியும்.

எடுத்துக்காட்டு (வெப்பேக் கட்டமைப்பு):

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
};

இந்த கட்டமைப்பு வெப்பேக்கிற்கு ./src/index.js இலிருந்து பண்ட்லிங்கைத் தொடங்கி, முடிவை ./dist/bundle.js இல் வெளியிடச் சொல்கிறது.

3. ட்ரீ ஷேக்கிங்

ட்ரீ ஷேக்கிங் என்பது மாட்யூல் பண்ட்லர்களால் உங்கள் இறுதி பண்டலில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்றப் பயன்படுத்தப்படும் ஒரு நுட்பமாகும். இது உங்கள் பண்டலின் அளவைக் கணிசமாகக் குறைத்து செயல்திறனை மேம்படுத்தும். எந்த ஏற்றுமதிகள் உண்மையில் மற்ற மாட்யூல்களால் பயன்படுத்தப்படுகின்றன என்பதைத் தீர்மானிக்க, ட்ரீ ஷேக்கிங் உங்கள் குறியீட்டின் நிலையான பகுப்பாய்வைச் சார்ந்துள்ளது.

எடுத்துக்காட்டு:

// my-module.js
export const myFunction = () => { console.log('myFunction'); };
export const myUnusedFunction = () => { console.log('myUnusedFunction'); };

// main.js
import { myFunction } from './my-module.js';
myFunction();

இந்த எடுத்துக்காட்டில், myUnusedFunction ஆனது main.js இல் பயன்படுத்தப்படவில்லை. ட்ரீ ஷேக்கிங் இயக்கப்பட்ட ஒரு மாட்யூல் பண்ட்லர் இறுதி பண்டலில் இருந்து myUnusedFunction ஐ அகற்றும்.

4. கோட் ஸ்ப்ளிட்டிங்

கோட் ஸ்ப்ளிட்டிங் என்பது உங்கள் பயன்பாட்டின் குறியீட்டைத் தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய துண்டுகளாகப் பிரிக்கும் நுட்பமாகும். இது ஆரம்ப பார்வைக்குத் தேவையான குறியீட்டை மட்டும் ஏற்றுவதன் மூலம் உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தும்.

கோட் ஸ்ப்ளிட்டிங் வகைகள்:

• நுழைவுப் புள்ளி பிரித்தல் (Entry Point Splitting): உங்கள் பயன்பாட்டை பல நுழைவுப் புள்ளிகளாகப் பிரித்தல், ஒவ்வொன்றும் வெவ்வேறு பக்கம் அல்லது அம்சத்துடன் தொடர்புடையது.
• டைனமிக் இறக்குமதிகள்: தேவைக்கேற்ப மாட்யூல்களை ஏற்ற டைனமிக் இறக்குமதிகளைப் பயன்படுத்துதல்.

எடுத்துக்காட்டு (டைனமிக் இறக்குமதிகளுடன் வெப்பேக்):

// index.js
button.addEventListener('click', async () => {
  const module = await import('./my-module.js');
  module.myFunction();
});

வெப்பேக் my-module.js க்காக ஒரு தனித் துண்டை உருவாக்கி, பொத்தானைக் கிளிக் செய்யும் போது மட்டுமே அதை ஏற்றும்.

5. இம்போர்ட் மேப்ஸ்

இம்போர்ட் மேப்ஸ் என்பது மாட்யூல் விவரக்குறிப்புகளுக்கும் அவற்றின் தொடர்புடைய URL-களுக்கும் இடையில் மேப்பிங்குகளை வரையறுப்பதன் மூலம் மாட்யூல் தீர்வைக் கட்டுப்படுத்த உங்களை அனுமதிக்கும் ஒரு பிரவுசர் அம்சமாகும். இது பின்வருவனவற்றிற்கு பயனுள்ளதாக இருக்கும்:

• மையப்படுத்தப்பட்ட சார்புநிலை மேலாண்மை: உங்கள் அனைத்து மாட்யூல் மேப்பிங்குகளையும் ஒரே இடத்தில் வரையறுத்தல்.
• பதிப்பு மேலாண்மை: மாட்யூல்களின் வெவ்வேறு பதிப்புகளுக்கு இடையில் எளிதாக மாறுதல்.
• CDN பயன்பாடு: CDN-களிலிருந்து மாட்யூல்களை ஏற்றுதல்.

எடுத்துக்காட்டு:

<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"
  }
}
</script>

<script type="module">
  import React from 'react';
  import ReactDOM from 'react-dom';

  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );
</script>

இந்த இம்போர்ட் மேப் குறிப்பிட்ட CDN-களிலிருந்து React மற்றும் ReactDOM ஐ ஏற்ற பிரவுசருக்குச் சொல்கிறது.

6. மாட்யூல்களை முன்னேற்றுதல்

மாட்யூல்களை முன்னேற்றுவது, அவை உண்மையில் தேவைப்படுவதற்கு முன்பே அவற்றைப் பெறுவதன் மூலம் செயல்திறனை மேம்படுத்தும். இது மாட்யூல்கள் இறுதியில் இறக்குமதி செய்யப்படும்போது அவற்றை ஏற்றுவதற்கு எடுக்கும் நேரத்தைக் குறைக்கும்.

எடுத்துக்காட்டு (<link rel="preload"> ஐப் பயன்படுத்தி):

<link rel="preload" href="/my-module.js" as="script">

இது பிரவுசருக்கு my-module.js ஐ விரைவில் பெறத் தொடங்கச் சொல்கிறது, அது உண்மையில் இறக்குமதி செய்யப்படுவதற்கு முன்பே.

மாட்யூல் ஏற்றுதலுக்கான சிறந்த நடைமுறைகள்

மாட்யூல் ஏற்றுதல் செயல்முறையை மேம்படுத்துவதற்கான சில சிறந்த நடைமுறைகள் இங்கே:

• ES மாட்யூல்களைப் பயன்படுத்துங்கள்: ES மாட்யூல்கள் ஜாவாஸ்கிரிப்ட்டிற்கான தரப்படுத்தப்பட்ட மாட்யூல் அமைப்பாகும் மற்றும் சிறந்த செயல்திறன் மற்றும் அம்சங்களை வழங்குகின்றன.
• ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்துங்கள்: மாட்யூல் பண்ட்லர்கள் HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைத்து குறியீட்டை மேம்படுத்துவதன் மூலம் செயல்திறனை கணிசமாக மேம்படுத்தும்.
• ட்ரீ ஷேக்கிங்கை இயக்குங்கள்: ட்ரீ ஷேக்கிங் பயன்படுத்தப்படாத குறியீட்டை அகற்றுவதன் மூலம் உங்கள் பண்டலின் அளவைக் குறைக்கும்.
• கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்துங்கள்: ஆரம்ப பார்வைக்குத் தேவையான குறியீட்டை மட்டும் ஏற்றுவதன் மூலம் கோட் ஸ்ப்ளிட்டிங் உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்தும்.
• இம்போர்ட் மேப்ஸ்களைப் பயன்படுத்துங்கள்: இம்போர்ட் மேப்ஸ்கள் சார்புநிலை மேலாண்மையை எளிதாக்கும் மற்றும் மாட்யூல்களின் வெவ்வேறு பதிப்புகளுக்கு இடையில் எளிதாக மாற உங்களை அனுமதிக்கும்.
• மாட்யூல்களை முன்னேற்றுங்கள்: மாட்யூல்களை முன்னேற்றுவது, அவை இறுதியில் இறக்குமதி செய்யப்படும்போது அவற்றை ஏற்றுவதற்கு எடுக்கும் நேரத்தைக் குறைக்கும்.
• சார்புகளைக் குறைத்தல்: உங்கள் பண்டலின் அளவைக் குறைக்க உங்கள் மாட்யூல்களில் உள்ள சார்புகளின் எண்ணிக்கையைக் குறைக்கவும்.
• சார்புகளை மேம்படுத்துங்கள்: உங்கள் சார்புகளின் மேம்படுத்தப்பட்ட பதிப்புகளைப் பயன்படுத்தவும் (எ.கா., மினிஃபை செய்யப்பட்ட பதிப்புகள்).
• செயல்திறனைக் கண்காணிக்கவும்: உங்கள் மாட்யூல் ஏற்றுதல் செயல்முறையின் செயல்திறனைத் தவறாமல் கண்காணித்து, மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறியவும்.

நிஜ உலக எடுத்துக்காட்டுகள்

இந்த நுட்பங்கள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான சில நிஜ உலக எடுத்துக்காட்டுகளைப் பார்ப்போம்.

1. இ-காமர்ஸ் இணையதளம்

ஒரு இ-காமர்ஸ் இணையதளம், இணையதளத்தின் வெவ்வேறு பகுதிகளைத் தேவைக்கேற்ப ஏற்ற கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தலாம். உதாரணமாக, தயாரிப்பு பட்டியல் பக்கம், தயாரிப்பு விவரங்கள் பக்கம், மற்றும் செக்அவுட் பக்கம் ஆகியவை தனித்தனி துண்டுகளாக ஏற்றப்படலாம். தயாரிப்பு மதிப்புரைகளைக் கையாளும் ஒரு மாட்யூல் அல்லது பணம் செலுத்தும் நுழைவாயிலுடன் ஒருங்கிணைக்கும் ஒரு மாட்யூல் போன்ற குறிப்பிட்ட பக்கங்களில் மட்டும் தேவைப்படும் மாட்யூல்களை ஏற்ற டைனமிக் இறக்குமதிகள் பயன்படுத்தப்படலாம்.

இணையதளத்தின் ஜாவாஸ்கிரிப்ட் பண்டலில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற ட்ரீ ஷேக்கிங் பயன்படுத்தப்படலாம். உதாரணமாக, ஒரு குறிப்பிட்ட கூறு அல்லது செயல்பாடு ஒரு பக்கத்தில் மட்டுமே பயன்படுத்தப்பட்டால், அது மற்ற பக்கங்களுக்கான பண்டலில் இருந்து அகற்றப்படலாம்.

இணையதளத்தின் ஆரம்பப் பார்வைக்குத் தேவையான மாட்யூல்களை முன்னேற்ற ப்ரீலோடிங் பயன்படுத்தப்படலாம். இது இணையதளத்தின் உணரப்பட்ட செயல்திறனை மேம்படுத்தி, இணையதளம் ஊடாடும் நிலைக்கு வர எடுக்கும் நேரத்தைக் குறைக்கும்.

2. ஒற்றைப் பக்கப் பயன்பாடு (SPA)

ஒரு ஒற்றைப் பக்கப் பயன்பாடு, வெவ்வேறு வழிகள் அல்லது அம்சங்களைத் தேவைக்கேற்ப ஏற்ற கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தலாம். உதாரணமாக, முகப்புப் பக்கம், எங்களைப் பற்றிய பக்கம், மற்றும் தொடர்புப் பக்கம் ஆகியவை தனித்தனி துண்டுகளாக ஏற்றப்படலாம். படிவச் சமர்ப்பிப்புகளைக் கையாளும் ஒரு மாட்யூல் அல்லது தரவுக் காட்சிப்படுத்தல்களைக் காண்பிக்கும் ஒரு மாட்யூல் போன்ற குறிப்பிட்ட வழிகளுக்கு மட்டும் தேவைப்படும் மாட்யூல்களை ஏற்ற டைனமிக் இறக்குமதிகள் பயன்படுத்தப்படலாம்.

பயன்பாட்டின் ஜாவாஸ்கிரிப்ட் பண்டலில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற ட்ரீ ஷேக்கிங் பயன்படுத்தப்படலாம். உதாரணமாக, ஒரு குறிப்பிட்ட கூறு அல்லது செயல்பாடு ஒரு வழியில் மட்டுமே பயன்படுத்தப்பட்டால், அது மற்ற வழிகளுக்கான பண்டலில் இருந்து அகற்றப்படலாம்.

பயன்பாட்டின் ஆரம்ப வழிக்குத் தேவையான மாட்யூல்களை முன்னேற்ற ப்ரீலோடிங் பயன்படுத்தப்படலாம். இது பயன்பாட்டின் உணரப்பட்ட செயல்திறனை மேம்படுத்தி, பயன்பாடு ஊடாடும் நிலைக்கு வர எடுக்கும் நேரத்தைக் குறைக்கும்.

3. நூலகம் அல்லது கட்டமைப்பு

ஒரு நூலகம் அல்லது கட்டமைப்பு, வெவ்வேறு பயன்பாட்டு நிகழ்வுகளுக்கு வெவ்வேறு பண்டல்களை வழங்க கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தலாம். உதாரணமாக, ஒரு நூலகம் அதன் அனைத்து அம்சங்களையும் உள்ளடக்கிய ஒரு முழுமையான பண்டலையும், குறிப்பிட்ட அம்சங்களை மட்டும் உள்ளடக்கிய சிறிய பண்டல்களையும் வழங்கலாம்.

நூலகத்தின் ஜாவாஸ்கிரிப்ட் பண்டலில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற ட்ரீ ஷேக்கிங் பயன்படுத்தப்படலாம். இது பண்டலின் அளவைக் குறைத்து, நூலகத்தைப் பயன்படுத்தும் பயன்பாடுகளின் செயல்திறனை மேம்படுத்தும்.

தேவைக்கேற்ப மாட்யூல்களை ஏற்ற டைனமிக் இறக்குமதிகள் பயன்படுத்தப்படலாம், இது டெவலப்பர்கள் தங்களுக்குத் தேவையான அம்சங்களை மட்டும் ஏற்ற அனுமதிக்கிறது. இது அவர்களின் பயன்பாட்டின் அளவைக் குறைத்து அதன் செயல்திறனை மேம்படுத்தும்.

மேம்பட்ட நுட்பங்கள்

1. மாட்யூல் ஃபெடரேஷன்

மாட்யூல் ஃபெடரேஷன் என்பது ஒரு வெப்பேக் அம்சமாகும், இது வெவ்வேறு பயன்பாடுகளுக்கு இடையில் இயக்க நேரத்தில் குறியீட்டைப் பகிர உங்களை அனுமதிக்கிறது. இது மைக்ரோஃபிரண்ட்எண்ட்களை உருவாக்க அல்லது வெவ்வேறு குழுக்கள் அல்லது நிறுவனங்களுக்கு இடையில் குறியீட்டைப் பகிர பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு:

// webpack.config.js (Application A)
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_a',
      exposes: {
        './MyComponent': './src/MyComponent',
      },
    }),
  ],
};

// webpack.config.js (Application B)
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_b',
      remotes: {
        'app_a': 'app_a@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

// Application B
import MyComponent from 'app_a/MyComponent';

பயன்பாடு B இப்போது இயக்க நேரத்தில் பயன்பாடு A இலிருந்து MyComponent கூறுகளைப் பயன்படுத்தலாம்.

2. சர்வீஸ் வொர்க்கர்ஸ்

சர்வீஸ் வொர்க்கர்ஸ் என்பது ஒரு வலை உலாவியின் பின்னணியில் இயங்கும் ஜாவாஸ்கிரிப்ட் கோப்புகள், கேச்சிங் மற்றும் புஷ் அறிவிப்புகள் போன்ற அம்சங்களை வழங்குகின்றன. அவை நெட்வொர்க் கோரிக்கைகளை இடைமறித்து கேச்சிலிருந்து மாட்யூல்களை வழங்கவும், செயல்திறனை மேம்படுத்தவும், ஆஃப்லைன் செயல்பாட்டை இயக்கவும் பயன்படுத்தப்படலாம்.

எடுத்துக்காட்டு:

// service-worker.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

இந்த சர்வீஸ் வொர்க்கர் அனைத்து நெட்வொர்க் கோரிக்கைகளையும் கேச் செய்து, அவை கிடைத்தால் கேச்சிலிருந்து வழங்கும்.

முடிவுரை

திறமையான மற்றும் பராமரிக்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க ஜாவாஸ்கிரிப்ட் இறக்குமதி கட்டத்தைப் புரிந்துகொள்வதும் கட்டுப்படுத்துவதும் அவசியம். டைனமிக் இறக்குமதிகள், மாட்யூல் பண்ட்லர்கள், ட்ரீ ஷேக்கிங், கோட் ஸ்ப்ளிட்டிங், இம்போர்ட் மேப்ஸ், மற்றும் ப்ரீலோடிங் போன்ற நுட்பங்களைப் பயன்படுத்துவதன் மூலம், உங்கள் பயன்பாடுகளின் செயல்திறனை கணிசமாக மேம்படுத்தி சிறந்த பயனர் அனுபவத்தை வழங்கலாம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் மாட்யூல்கள் திறமையாகவும் αποτελεσματικάவும் ஏற்றப்படுவதை உறுதிசெய்யலாம்.

உங்கள் மாட்யூல் ஏற்றுதல் செயல்முறையின் செயல்திறனை எப்போதும் கண்காணித்து, மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறிய நினைவில் கொள்ளுங்கள். வலை மேம்பாட்டுச் சூழல் தொடர்ந்து வளர்ந்து வருகிறது, எனவே சமீபத்திய நுட்பங்கள் மற்றும் தொழில்நுட்பங்களுடன் புதுப்பித்த நிலையில் இருப்பது முக்கியம்.

மேலும் ஆதாரங்கள்

• MDN வலை ஆவணங்கள்: ஜாவாஸ்கிரிப்ட் மாட்யூல்கள்
• வெப்பேக் ஆவணங்கள்
• பார்சல் ஆவணங்கள்
• ரோல்அப் ஆவணங்கள்